Compare and contrast HTML and HTML5.

HTML stands for Hyper Text Markup Language. It is used to design web pages using a markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. A markup language is used to define the text document within tag which defines the structure of web pages. This language is used to annotate (at the note for computer) text so that a machine can understand it and manipulate text accordingly. Most of the markup (e.g. HTML) languages are human readable. The language uses tags to define what manipulation has to be done on the text. It is used for structuring and presenting the content on the web pages. HTML5 is the fifth version of HTML. Many elements are removed or modified from HTML5. There are many differences between HTML and HTML5 which are discussed below:

HTMLHTML5
It didn’t support audio and video without the use of flash player support.It supports audio and video controls with the use of <audio> and <video> tags.
It uses cookies to store temporary data.It uses SQL databases and application cache to store offline data.
Does not allow JavaScript to run in browser.Allows JavaScript to run in background. This is possible due to JS Web worker API in HTML5.
Vector graphics is possible in HTML with the help of various technologies such as VML, Silver-light, Flash, etc.Vector graphics is additionally an integral a part of HTML5 like SVG and canvas.
It does not allow drag and drop effects.It allows drag and drop effects.
Not possible to draw shapes like circle, rectangle, triangle etc.HTML5 allows to draw shapes like circle, rectangle, triangle etc.
It works with all old browsers.It supported by all new browser like Firefox, Mozilla, Chrome, Safari, etc.
<HTML>,<Body> , and <Head> tags are mandatory while writing a HTML code.These tags can be omitted while writing HTML code.
Older version of HTML are less mobile-friendly.HTML5 language is more mobile-friendly.
Doctype declaration is too long and complicated.Doctype declaration is quite simple and easy.
Elements like nav, header were not present.New element for web structure like nav, header, footer etc.
Character encoding is long and complicated.Character encoding is simple and easy.
It is almost impossible to get true GeoLocation of user with the help of browser.One can track the GeoLocation of a user easily by using JS GeoLocation API.
It can not handle inaccurate syntax.It is capable of handling inaccurate syntax.
Being an older version , it is not fast , flexible , and efficient as compared to HTML5.It is efficient, flexible and more fast in comparison to HTML.
Attributes like charset, async and ping are absent in HTML.Attributes of charset, async and ping are a part of HTML 5.

There are many HTML elements which have been modified or removed from HTML5. Some of them are listed below:

ElementIn HTML5
<applet>Changed to <object>
<acronym>Changed to <abbr>
<dir>Changed to <ul>
<frameset>Removed
<frame>Removed
<noframes>Removed
<strike>No new tag. CSS is used for this
<big>No new tag. CSS is used for this
<basefont>No new tag. CSS is used for this
<font>No new tag. CSS is used for this
<center>No new tag. CSS is used for this
<tt>No new tag. CSS is used for this

Many new elements are added in HTML5 like nav, audio, figcaption, progress, command, time, datalist, video, figure, meter, data, section, time, aside, canvas, summary, rp, rt, details, wbr, header, footer, keygen, embed, article, hgroup, bdi, mark, output, source, track, section, ruby and many more

2. Describe the structure of an HTML document


As we all know HTML is a language of the web. It’s used to design the web pages or we can say structure the page layouts of a website.  HTML stands for HYPERTEXT MARKUP LANGUAGE, as its full form suggests it’s not any programming language, a markup language. So, while the execution of HTML code we can’t face any such error. In real HTML code wasn’t compiled or interpreted because HTML code was rendered by the browser. which is similar to the compilation of a program. Html content is parched through the browser to display the content of HTML. 

HTML DOCUMENTS STRUCTURE

Html used predefined tags and attributes to tell the browser how to display content, means in which format, style, font size, and images to display. Html is a case insensitive language. Case insensitive means there is no difference in upper case and lower case ( capital and small letters) both treated as the same, for r example ‘D’ and ‘d’ both are the same here. 
There are generally two types of tags in HTML: 
 

  1. Paired Tags: These tags come in pairs. That is they have both opening(< >) and closing(</ >) tags.
  2. Empty Tags: These tags do not require to be closed.

Below is an example of a (<b>) tag in HTML, which tells the browser to bold the text inside it. 
 

Tags and attributes:  Tags are individuals of html structure, we have to open and close any tag with a forward slash like this <h1> </h1>. There are some variations with the tag some of them are self-closing tag which isn’t required to close and some are empty tag where we can add any attributes in it.  Attributes are additional properties of html tags that define the property of any html tags. i.e. width, height, controls, loops, input, and autoplay. These attributes also help us to store information in meta tags by using name, content, and type attributes. Html documents structured mentioned below: 
 

Structure of an HTML Document

An HTML Document is mainly divided into two parts: 
 

  • HEAD: This contains the information about the HTML document. For Example, the Title of the page, version of HTML, Meta Data, etc.
  • BODY: This contains everything you want to display on the Web Page.

HTML Document Structure

Let us now have a look at the basic structure of HTML. That is the code that is a must for every webpage to have: 
 

<!DOCTYPE html> 
<!-- Defines types of documents : Html 5.O  -->
<!DOCTYPE html>
<!-- Defines types of documents : Html 5.O -->
<html lang="en">
    <!-- DEfines languages of content : English -->
    <head>
    <!-- Information about website and creator -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Defines the compatibility of version with browser -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- for make website responsive -->
    <meta name="author" content="Mr.X">
    <meta name="Linkedin profile" content="WWW.linkedin.com/Mr.X_123" >
    <!-- To give information about author or owner -->
    <meta name="description " 
    content="A better place to learn computer science">
    <!-- to explain about website in few words -->
    <title>GeeksforGeeks</title>
    <!-- Name of website or content to display -->
</head>
<body>
    <!-- Main content of website -->
    <h1>GeeksforGeeks</h1>
<p>A computer science portal for geeks</p>
</body>
</html>

Every Webpage must contain this code. Below is the complete explanation of each of the tags used in the above piece of HTML code:
<!DOCTYPE html>: This tag is used to tells the HTML version. This currently tells that the version is HTML 5.0 
<html>  </html> : <html> is a root element of html.  It’s a biggest and main element  in complete  html language, all the tags , elements and attributes  enclosed in it or we can say wrap init , which is used to structure a web page. <html> tag is parent tag of <head> and  <body>  tag , other tags enclosed within <head > and <body>.  In <html > tag we use “lang” attributes to define languages of html page such as <html lang=”en”> here en represents English language. some of them are : es = Spanish , zh-Hans = Chinese, fr= french and el= Greek etc.
<head>: Head tag contains metadata, title, page CSS etc.  Data stored in the <head>  tag is not displayed to the user, it is just written for reference purposes and as a watermark of the owner.  

 Note: for better understanding refer above code of html.
 <title> = to store website name or content to be displayed.
 <link>   = To add/ link css( cascading style sheet)  file.
 <meta>   = 1. to store data about website, organisation , 
creator/ owner
            2. for responsive website via attributes 
            3. to tell compatibility of html with browser 
 <script> = to add javascript file. 

<body>: A body tag is used to enclose all the data which a web page has from texts to links. All the content that you see rendered in the browser is contained within this element. Following tags and elements used in the body.

   1 .  <h1> ,<h2> ,<h3> to <h6>
   2.   <p>
   3.   <div> and <span>
   4.   <b>, <i> and<u> 
   5.   <li>,<ul>and<ol>. 
   6.   <img> , <audio> , <video> and<iframe>
   7.   <table> <th> , <thead>and<tr>.  
   8.   <form> 
   9.   <label> and <input> others……….


10.How does the Domain Name Service (DNS) work to translate domain


The Domain Name System (DNS) is a hierarchical and distributed naming system used to translate human-readable domain names into IP addresses. This translation is essential for computers to locate and connect to each other over the internet. Here's a simplified overview of how DNS works:

  1. User Enters a Domain Name:

    • When you enter a domain name (e.g., www.example.com) into your web browser, your computer needs to know the corresponding IP address to reach the web server hosting that domain.
  2. Local DNS Resolver:

    • Your computer first checks its local DNS resolver cache. This cache stores previously resolved domain names and their corresponding IP addresses, reducing the need to query external DNS servers for frequently visited sites.
  3. Recursive DNS Servers:

    • If the IP address is not found in the local cache or if the cache has expired, your computer sends a DNS query to a recursive DNS server. Recursive DNS servers are responsible for resolving domain names by querying other DNS servers if necessary.
  4. Root DNS Servers:

    • The recursive DNS server starts by querying the root DNS servers. These servers are the starting point of the DNS hierarchy and have information about the top-level domain (TLD) servers.
  5. TLD DNS Servers:

    • Based on the TLD of the domain (e.g., ".com"), the root DNS servers direct the recursive DNS server to the TLD DNS servers. TLD servers store information about the authoritative name servers for the second-level domains.
  6. Authoritative DNS Servers:

    • The TLD DNS servers provide information about the authoritative DNS servers for the specific domain. The recursive DNS server then queries these authoritative name servers.
  7. Domain's DNS Records:

    • The authoritative DNS servers hold the DNS records for the domain, including the IP address associated with the requested domain name. These records are returned to the recursive DNS server.
  8. Cache Update:

    • The recursive DNS server stores the resolved IP address in its cache for future use, reducing the need to go through the entire resolution process for subsequent requests to the same domain.
  9. Response to User:

    • Finally, the recursive DNS server sends the IP address back to the user's computer, allowing the web browser to connect to the desired web server.

By following this hierarchical process, DNS efficiently translates human-readable domain names into IP addresses, enabling the seamless functioning of the internet.


#.Explain about DOM






Comments

Popular posts from this blog

8) User Authentication: Assume four users user1, user2, user3 and user4 having the passwords pwd1, pwd2, pwd3 and pwd4 respectively. Write a PHP for doing the following. 1. Create a Cookie and add these four user id’s and passwords to this Cookie. 2. Read the user id and passwords entered in the Login form and authenticate with the values (user id and passwords) available in the cookies. If he is a valid user (i.e., user-name and password match) you should welcome him by name (user-name) else you should display ―You are not an authenticated user ’’. Use init-parameters to do this

4. Write a C program to implement the Brute force technique of Top down Parsing.

Web development Lab